<template>
    <el-container class="login_box">
        <el-form
            ref="ruleFormRef"
            :model="user"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize.value"
            status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password" type="password" show-password/>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-row>
                    <el-col :span="10">
                        <el-input v-model="user.code"/>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-image src="/api/captcha"/>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </el-container>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {request} from '@/util/request.js'
import {useRouter} from "vue-router";
import {useUserStore} from "@/store/user.js";
import JSEncrypt from 'jsencrypt';

const formSize = ref('default')
const ruleFormRef = ref()
const router = useRouter()
const userStore = useUserStore()
const user = reactive({
    username: '',
    password: '',
    code: ''
})

const encrypt = new JSEncrypt()
// 发送请求获取公钥
request.get('/getKey').then(res => {
    if (res.code === 1) {
        // 将获取的 uuid 和公钥存储到 pinia
        userStore.setPublicKey(res.data.publicKey)
        userStore.setUuid(res.data.uuid)
    } else {
        ElMessage({
            message: res.msg,
            type: 'warning',
        })
    }
})
const rules = reactive({
    username: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
    ],
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        // 携带上 uuid 对数据加密
        user.uuid = userStore.uuid
        encrypt.setKey(userStore.publicKey) // 设置公钥
        user.password = encrypt.encrypt(user.password) // 对密码加密
        if (valid) {
            request.post('/user/login', user).then(res => {
                if (res.code === 1) {
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    // 将登录成功的 token 存储到 pinia
                    userStore.setToken(res.data)
                    router.push('/')
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })

        } else {
            ElMessage({
                message: '登录失败',
                type: 'warning',
            })
        }
    })
}
</script>

<style scoped>
.login_box {
    margin: 0 auto;
    justify-content: center
}
</style>
